<template>
  <div>
    <van-nav-bar title="确认订单" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="containerSubmitOrder bg-fff">
      <!-- 地址信息（保持静态，需后续对接地址接口） -->
      <div class="userAddress">
        <van-icon name="location-o" />
        <div class="userLeft">
          <div class="user-info">
            <p class="f15 fw600">张三 13800000000</p>
            <p class="f999">北京市北京市上梅林旭日花园</p>
          </div>
          <i class="iconfont icon-jiantouyou"></i>
        </div>
      </div>
  
      <!-- 商品信息 -->
      <div class="order-info">
        <!-- 动态运费提示 -->
        <p v-if="hasFreeShipping" class="f13 f999">已免运费（满{{ (productList.fullReduceMoney/100).toFixed(2) }}元免运费）</p>
        <p v-else class="f13 f999">运费{{ (productList.expressFee/100).toFixed(2) }}元（满{{
          (productList.fullReduceMoney/100).toFixed(2) }}元免运费）</p>
  
        <!-- 商品列表 -->
        <div class="product" v-for="product in productList.carts" :key="product.cartId">
          <img :src="product.imgUrl" alt="product1">
          <div class="product-details">
            <p>{{ product.masterName }}</p>
            <p class="f999">{{ product.slaveName }}</p>
            <div class="price-count">
              <strong>¥{{ (product.price/100).toFixed(2) }}</strong>
              <span class="f999">x{{ product.buyNum }}</span>
            </div>
          </div>
        </div>
      </div>
  
      <!-- 金额汇总 -->
      <div class="summary">
        <p>商品总金额 <span>¥{{ (productList.totalMoney/100).toFixed(2) }}</span></p>
        <p>运费 <span>¥{{ (actualExpressFee/100).toFixed(2) }}</span></p>
      </div>
    </div>
  
    <!-- 优惠券区域（保持静态） -->
    <div class="container">
      <!-- 优惠券区域 -->
      <ul class="options">
        <li>
          <span class="icon">📜 优惠券</span>
          <span>3张券可用 <van-icon name="arrow" /></span>
        </li>
        <li>
          <span class="icon">📜 苏打券</span>
          <span>0张券可用 <van-icon name="arrow" /></span>
        </li>
        <li>
          <span class="icon">💎 余额</span>
          <span>¥0.00 <van-icon name="arrow" /></span>
        </li>
  
        <li>
          <span class="icon">📄 发票</span>
          <span>不开发票 <van-icon name="arrow" /></span>
        </li>
      </ul>
    </div>
  
    <!-- 支付方式 -->
    <van-action-sheet v-model="show" title="请选择支付方式" close="action">
      <div class="content">
        <van-radio-group v-model="radio">
          <p class="radio-item">
  
            <van-radio name="1">微信</van-radio>
            <img src="../../../assets/img/wx.png" alt="">
          </p>
          <p class="radio-item">
            <van-radio name="2">支付宝</van-radio>
            <img src="../../../assets/img/zfb.png" alt="">
          </p>
        </van-radio-group>
        <div class="middle">
          <div class="btn-pay middle" @click="createVerify">确认支付{{totalAmount.toFixed(2)}}</div>
        </div>
      </div>
    </van-action-sheet>
  
    <!-- 合并后的底部栏 -->
    <div class="footer">
      <div class="total">
        <span>合计：</span>
        <strong>¥{{ totalAmount.toFixed(2) }}</strong>
      </div>
      <button class="submit-btn" @click="show=true">提交订单</button>
    </div>
  </div>
</template>
   
<script> 
import request from '@/utils/request';
export default {
  data() {
    return {
      show: false,
      radio: '1',
      verifyData: {},
      productList: {
        carts: [],
        totalMoney: 0,
        expressFee: 0,
        fullReduceMoney: 0
      }
    };
  },
  computed: {
    // 是否免运费
    hasFreeShipping() {
      return this.productList.totalMoney >= this.productList.fullReduceMoney;
    },
    // 实际运费
    actualExpressFee() {
      return this.hasFreeShipping ? 0 : this.productList.expressFee;
    },
    // 总金额（商品金额 + 实际运费）
    totalAmount() {
      return (this.productList.totalMoney + this.actualExpressFee) / 100;
    }
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    onSubmit() {
      this.$router.push({
        name: 'pay',
        query: {
          preOrderId: this.productList.preOrderId // 传递预订单ID
        }
      });
    },

    onPay() {
      this.$router.push({
        path: '/order/pay', // 使用绝对路径
        query: {
          amount: this.totalAmount
        },

      });
    },

    

    async createVerify() {

      console.log('preOrderId:', this.productList.preOrderId); // 先打印参数值
      // let res = await request.post('/preOrder/detail', { preOrderId: this.productList.preOrderId });
      let res = await request.post("/order/create", { preOrderId: this.productList.preOrderId, allFee: this.totalAmount * 100, addressInfo: { addressId: 1, address: '北京市北京市上梅林旭日花园', mobile: '13800000000', name: '张三' } });
      console.log('响应数据:', res);
      this.$store.commit('SET_ORDER_DATA', res.result); // 保存订单数据到store
      this.onPay(); // 跳转支付成功页面
    }

  },

  mounted() {
    //使用$route.query接收参数
    const orderData = JSON.parse(this.$route.query.orderData || '[]');
    this.productList = orderData;
    console.log('接收到的订单数据:', orderData);

    const productDetail = this.$route.query.productDetail;
  if (productDetail) {
    this.productList = JSON.parse(productDetail); // 将 JSON 字符串转回对象
  }
  }
}   
</script>

<style lang="less" scoped>
@import "verify.less";

.content {
  height: 250px;
  padding: 16px 16px;
}

.radio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.radio-item img {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.btn-pay {
  width: 85%;
  line-height: 36px;
  text-align: center;
  background-color: #ff6600;
  color: #fff;
  position: fixed;
  bottom: 30px;
  border-radius: 3px;
}
</style>